<template>
    <div class="position-page">
        <!--不使用定位，由于解决ios的侧滑问题，定位使得页面切换出现错乱-->
        <x-header
            :left-options="{showBack: true, backText: ''}"
            id="searchCityHeader">
            <div slot="overwrite-title">
                <x-input v-model.trim="inputInfor"
                         @keyup.native="userInput" @on-change="userInput"
                         title="输入城市名称" placeholder="输入城市名称">
                    <i slot="label" class="iconfont icon-search"></i>
                </x-input>
            </div>
        </x-header>
        <!--滚动区域-->
        <div class="position-content" :style="{height: contentHeight}" ref="posContent">
            <!--用户搜索结果集-->
            <ul id="search_ul"
                v-show="isSearch"
                ref="searchUl"
                class="page" :style="{height: contentHeight}">
                <li class="city-name vux-1px-b"
                    v-for="item in searchResults"
                    v-text="item.name"
                    @click="setCityCode(item)"></li>
            </ul>
            <!--初始化数据展示结果集-->
            <div v-show="!isSearch">
                <div class="userCityInfo">
                    <!--当前定位城市-->
                    <h4>当前定位城市</h4>
                    <span id="letter_当"></span>
                    <div class="current-city-box">
                        <i class="iconfont icon-location"></i>
                        <span class="current-city" @click="handleCurrentCity" v-text="cityName"></span>
                        <span class="position-box" @click="handleAgainPosition">
                        <i class="iconfont icon-position"></i>重新定位
                    </span>
                    </div>
                    <!--热门城市-->
                    <h4 id="letter_热">热门城市</h4>
                    <div class="hot-city-list">
                        <span v-for="item in hotCity" v-text="item.name" @click="setCityCode(item)"></span>
                    </div>
                </div>
                <!--城市列表-->
                <ul id="cityWrap">
                    <li class="city_letter" v-for="(value, key) in cityList" :key="key">
                        <h4 class="city_letter_name" v-bind:id="'letter_' + key" v-text="key"></h4>
                        <ul>
                            <li class="city-name vux-1px-b"
                                v-for="item in value"
                                :key="item.code"
                                v-text="item.name" @click="setCityCode(item)"></li>
                        </ul>
                    </li>
                </ul>
                <!--首字母列表-->
                <ul class="letter_ul">
                    <li v-for="item in letterList" :key="item" v-html="item" @click="clickLetter($event)"></li>
                </ul>
            </div>
            <div id="positionGeolocation" style="display: none;"></div>
        </div>
    </div>
</template>

<script>
    /**
     * Created by c.y on 2018/3/16.
     * 我是定位页面
     * 开发 by c.k
     */
    import {XInput, XHeader, Search} from 'vux';
    import sysApi from '../../api/api';
    import statusCodeManage from '../../api/statusCodeManage';

    export default {
        name: 'f-position',
        data () {
            return {
                cityName: '',  // 当前城市名
                adcode: '', // 当前城市code
                isSearch: false,  // 控制搜索列表
                hotCity: null,  // 热门城市
                cityList: null,   // 城市列表
                letterList: null,  // 字母列表
                inputInfor: '',      // 用户输入内容
                searchResults: [],
                contentHeight: 0 // 定位的内容
            };
        },
        components: {
            XInput, XHeader, Search
        },
        methods: {
            // 更新城市code cityCode为发送请求的code
            updateCityCode (cityCode) {
                // 全局发送城市code
                let newClientInfo = JSON.parse(window.localStorage.getItem('newClientInfo'));
                newClientInfo.areaCode = cityCode;
                window.localStorage.setItem('newClientInfo', JSON.stringify(newClientInfo));
            },
            // 调取高德地图api, 获取cityCode与cityName
            fetchCityCodeByGao: function () {
                let _this = this;
                // 创建地图对象   需要一个div 对象  id 为geolocation
                let mapObj = new AMap.Map('positionGeolocation');
                // 使用城市搜索组件
                mapObj.plugin('AMap.Geolocation', function () {    // AMap.Geolocation    AMap.CitySearch
                    let geolocation = new AMap.Geolocation({       // Geolocation
                        enableHighAccuracy: false, //是否使用高精度定位，默认:true
                        GeoLocationFirst: false,    // 默认为false，设置为true的时候可以调整PC端为优先使用浏览器定位，失败后使用IP定位
                        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                        showButton: false,           // 是否显示定位按钮
                        useNative: false              // 是否使用安卓定位sdk用来进行定位
                        // enableHighAccuracy: true, //是否使用高精度定位，默认:true
                        // timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                        // maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                        // showButton: false,        //显示定位按钮，默认：true
                    });
                    // getCurrentPosition   getLocalCity
                    // 定位失败的次数，我们约定为3次，3次失败的话，就展示获取城市失败
                    let posiTimes = 3;
                    _this.getGeolocation(geolocation, posiTimes);
                });
            },
            // 高德地图调取api
            getGeolocation (geolocation, posiTimes) {
                let _this = this;
                geolocation.getCurrentPosition(function (status, result) {
                    posiTimes--;
                    // 定位成功
                    if (status == 'complete') {
                        _this.cityName = result.addressComponent.city;
                        _this.adcode = result.addressComponent.adcode;
                        _this.adcode = _this.adcode.substring(0, _this.adcode.length - 2) + '00';
                        let cityCodeObj = {
                            name: _this.cityName,
                            code: _this.adcode
                        };
                        window.localStorage.setItem('cityCode', JSON.stringify(cityCodeObj));
                        _this.updateCityCode(_this.adcode);
                        _this.$router.push({path: '/f-main'});
                        return false;
                    } else {
                        // 定位失败，一直重复定位,如果3次之后，那么就不在定位，直接展示定位失败
                        // 定位失败后，还是使用上一次的code
                        if (!posiTimes) {
                            _this.cityName = '定位失败';
                            let cityCodeObj = {
                                name: _this.cityName,
                                code: JSON.parse(window.localStorage.getItem('newClientInfo')).areaCode
                            };
                            window.localStorage.setItem('cityCode', JSON.stringify(cityCodeObj));
                            return false;
                        } else {
                            // 如果用户拒绝定位，我们可以给出提示，传递成都code
                            if (result.message === 'Geolocation permission denied.') {
                                _this.$vux.toast.text('请开启定位权限，以获取正常的使用', 'middle');
                                _this.cityName = '定位失败';
                                let cityCodeObj = {
                                    name: _this.cityName,
                                    code: JSON.parse(window.localStorage.getItem('newClientInfo')).areaCode
                                };
                                window.localStorage.setItem('cityCode', JSON.stringify(cityCodeObj));
                                return false;
                            } else {
                                // 如果是其他原因造成的定位失败的话，我们尝试三次定位，如何失败的话
                                // 默认传递成都code，显示定位失败
                                _this.getGeolocation(geolocation, posiTimes);
                            }
                        }
                    }
                });
            },
            userInput: function () {
                if (this.inputInfor.length > 0) {
                    let _py = this.inputInfor;
                    let result = [];
                    let letterKey = Object.keys(this.cityList);
                    let len = letterKey.length;
                    for (let i = 0; i < len; i++) {
                        let letterVal = this.cityList[letterKey[i]];
                        for (let j = 0, mLen = letterVal.length; j < mLen; j++) {
                            let m = letterVal[j];
                            if (m.name.indexOf(_py) == 0) {
                                result.push(m);
                            }
                        }
                    }
                    this.$refs.searchUl.scrollTop = 46;
                    this.isSearch = true;
                    this.searchResults = result;
                } else {
                    this.isSearch = false;
                }
            },
            // 处理选择当前城市
            handleCurrentCity () {
                // 如果当前正在定位的话，那么点击当前城市，那么就不做什么反应
                if (this.cityName === '城市定位中...') {
                    return false;
                    // 定位失败的话
                } else if (this.cityName === '定位失败') {
                    return false;
                } else {
                    // 只有定位成功后，才跳转到首页
                    this.$router.push({path: '/f-main'});
                }
            },
            // 处理选择重新定位按钮
            handleAgainPosition () {
                this.cityName = '城市定位中...';
                this.fetchCityCodeByGao();
            },
            // 处理选择城市
            setCityCode: function (item) {
                // 返回城市信息
                let _item = item;
                this.isSearch = false;
                this.searchResults = [];
                this.inputInfor = '';

                window.localStorage.setItem('cityCode', JSON.stringify(_item));
                // 修改  localS 的 areaCode
                this.updateCityCode(_item.code);
                this.$router.push({path: '/f-main'});
            },
            // click 字母, 修改是为了修复ios返回时，dom不加载，需要点击空白才会加载
            clickLetter: function (e) {
                let target = e.target || e.srcElement || event.srcElement || event.target;
                let _htmlNode = document.getElementById('letter_' + target.innerHTML);
                if (_htmlNode) {
//                    let newY = _htmlNode.offsetTop;
//                    newY -= document.getElementById('searchCityHeader').offsetHeight;
//                    window.scroll(0, newY);
                    this.$refs.posContent.scrollTop = _htmlNode.offsetTop - 46;
                } else {
//                    window.scroll(0, 0);
                    this.$refs.posContent.scrollTop = 0;
                }
            }
        },
        deactivated(){
            this.cityName = '';
            this.adcode =  '';
            this.isSearch = false;
            this.hotCity = null;
            this.cityList = null;
            this.letterList =  null;
            this.inputInfor = '';
            this.searchResults = [];
            this.contentHeight = 0;
            this.$store.commit('UPDATE_DIRECTION', {direction: 'none'});
        },
        activated: function () {
            // 如果本地没有城市的code的话
            this.contentHeight = (document.documentElement.clientHeight - 46) + 'px';
            let cityCode = window.localStorage.getItem('cityCode');
            if (!cityCode) {
                this.cityName = '城市定位中...';
                // 请求高德地图api
                this.fetchCityCodeByGao();
            } else {
                this.cityName = JSON.parse(cityCode).name;
                this.adcode = JSON.parse(cityCode).code;
            }
            // 获取城市列表
            sysApi.getAreaInfo().then(response => {
                    this.hotCity = response.hotCity;
                    this.cityList = response.cityList;
                    response.group.unshift('热');
                    response.group.unshift('<i class="iconfont icon-location goto-location-icon"></i>');
                    this.letterList = response.group;
                },
                error => {
                    statusCodeManage.showTipOfStatusCode(error, this);
                });
        }
    };
</script>


<style lang="less">
    @import "../../style/mixin";

    .position-page {
        .vux-header {
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            .vux-header-title {
                font-size: 18px;

            }
            .vux-header-left {
                .left-arrow:before {
                    border: solid 1px @color-white;
                    border-width: 2px 0 0 2px;
                }
            }
        }
        .position-content {
            overflow-y: auto;
        }
        .iconfont {
            display: inline-block;
            color: @color-white;
            margin-top: 2px;
        }
        .userCityInfo {
            background-color: @color-background-default;
        }
        .userCityInfo h4 {
            height: 32px;
            line-height: 32px;
            padding: 0 12px;
            font-size: @font-size-medium;
            font-weight: normal;
            color: @color-text-third;
        }
        .vux-header-title-area {
            .weui-search-bar {
                padding: 0;
            }
        }
        .vux-header-title-area, .vux-header .vux-header-title {
            position: relative;
            right: -14px;
            top: 3px;
            margin: 0 36px;
        }

        .vux-header .weui-cell {
            padding: 0 4PX;
            border-bottom: 1PX solid @color-white; /*no*/
        }

        .vux-header-title-area .weui-input {
            height: 30px;
        }
        .vux-header-title-area .icon-search {
            position: relative;
            font-size: 20Px;
        }
        .vux-header-title-area input {
            position: relative;
            padding-left: 10px;
            line-height: 1;
            color: @color-white;
            font-size: @font-size-medium;
        }
        .vux-header-title-area input::-webkit-input-placeholder {
            color: @color-white;
        }
        .vux-header-title-area .weui-icon-clear:before {
            color: @color-white;
        }
        .hot-city-list {
            padding: 0 12px;
            .flexLayout();
            flex-wrap: wrap;
            span {
                width: 30%;
                height: 44px;
                line-height: 44px;
                display: inline-block;
                margin-right: 10px;
                margin-bottom: 10px;
                font-size: @font-size-medium;
                text-align: center;
                box-sizing: border-box;
                background-color: @color-white;
                color: @color-text-primary;
                border-radius: @border-radius-normal-size;
                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
        }
        .current-city-box {
            width: 100%;
            height: 44px;
            padding: 0 12px;
            font-size: @font-size-medium;
            line-height: 44px;
            background: @color-white;
            box-sizing: border-box;
            .current-city {
                font-size: @font-size-base;
                color: @color-text-primary;
            }
            .position-box {
                color: @color-primary;
                float: right;
                .icon-position {
                    color: @color-primary;
                }
            }
            .icon-location {
                color: @color-primary;
            }
        }
        .letter_ul {
            position: fixed;
            top: 60%;
            right: -10px;
            width: 44px;
            text-align: center;
            box-sizing: border-box;
            font-size: @font-size-small;
            color: @color-primary;
            border-radius: 6px;
            background-color: transparent;
            -moz-transform: translate3d(0, -50%, 0);
            -ms-transform: translate3d(0, -50%, 0);
            -o-transform: translate3d(0, -50%, 0);
            -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
            z-index: 999;
            li {
                line-height: 1.3;
            }
            .goto-location-icon {
                color: @color-primary;
            }
        }
        .city_letter {
            background-color: @color-background-default;
            color: @color-text-primary;
            text-indent: 6px;
        }
        .city_letter_name {
            padding: 0 12px;
            font-weight: normal;
            font-size: @font-size-base;
        }
        .city-name {
            padding-left: 12px;
            font-size: @font-size-medium;
            color: @color-text-primary;
            line-height: 44px;
            background-color: @color-white;
        }
        li {
            list-style: none;
        }
    }


</style>
